<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>form表单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #form {
            padding: 20px 30px
        }

        #form>div {
            margin: 30px 25px;
        }

        .radio-inline {
            display: inline;
            margin-left: 20px;
        }

        .form-item>.radio-inline:first-of-type {
            margin-left: 0;
        }

        #textarea {
            resize: none;
            width: 500px;
            padding: 10px;
        }

        input[name="suggest"] {
            margin-right: 10px;
        }

        h1 {
            margin-bottom: 10px;
            font-size: 20px;
        }

        #img-upload {
            display: none;
        }

        #span-upload {
            display: inline-block;
            width: 80px;
            height: 80px;
            border: 1px solid #999;
            border-radius: 5px;
            text-align: center;
            font-size: 50px;
            color: #999;
            font-weight: 100;
            cursor: pointer;
        }

        .contact {
            width: 500px;
            height: 30px;
        }

        input[type="url"] {
            width: 500px;
            height: 30px;
        }
    </style>
</head>

<body>
    <form id="form" action="">
        <h1>
            意见反馈
        </h1>
        <hr>
        <div class="form-item">
            <div class="radio-inline">
                <input type="radio" name="suggest" value="内容意见" checked />
                <label>内容意见</label>
            </div>
            <div class="radio-inline">
                <input type="radio" name="suggest" value="产品建议" />
                <label>产品建议</label>
            </div>
            <div class="radio-inline">
                <input type="radio" name="suggest" value="内容意见" />
                <label>技术问题</label>
            </div>
            <div class="radio-inline">
                <input type="radio" name="suggest" value="内容意见" />
                <label>其他</label>
            </div>
        </div>
        <div class="form-item">
            <textarea name="ide" id="textarea" cols="30" rows="10" placeholder="请填写具体内容帮助我们了解您的意见与建议"></textarea>
        </div>
        <div class="form-item">
            <div id="imgView"></div>
            <span id="span-upload">
                +
            </span>
            <input type="file" id="img-upload" multiple onchange="uploadFile(this)">
            <p style="margin-top: 10px;">最多可以上传5张图片，图片大小不能超过2M</p>
        </div>
        <div class="form-item">
            <input class="contact" type="text" placeholder="请留下真是联系方式（邮箱、QQ）方便我们答疑解惑！">
        </div>
        <div class="form-item">
            <label for="">相关页面地址</label>
            <input type="url">
        </div>
    </form>
</body>
<script>
    var uploadBtn = document.getElementById("span-upload");
    var file = document.getElementById("img-upload");
    var imgView = document.getElementById("imgView");
    function uploadFile(ele) {
        console.log(ele.files);
        for (var key in ele.files) {
            if (ele.files.hasOwnProperty(key)) {
                var element = ele.files[key];
                var p = document.createElement("p");
                p.innerText = element.name;
                imgView.appendChild(p);
            }
        }
    }
    window.onload = function () {

        uploadBtn.addEventListener('click', function () {
            file.click();
        }, false)

    }
</script>

</html>